<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>排序拼图</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="app">
            <div class="wrapper">
                <transition-group class="grid" tag="ul" name="list">
                    <li
                        v-for="(num,i) in state"
                        :class="{item:true,hidden:!num}"
                        :key="num"
                    >
                        <button
                            :disabled="completed || !isPlayable(empty,i,4)"
                            class="button"
                            @click="clickMove($event,i)"
                        >
                            {{num}}
                        </button>
                    </li>
                </transition-group>
            </div>
            <button
                :disabled="!completed"
                :class="{overlay:true,'overlay-hidden':!completed}"
                @click="shuffleState"
            >
                Congratulations! Play again?
            </button>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script src="./index.js"></script>
    </body>
</html>
